<template>
    <div id="product">
      <div id="main">

        <div id="productImg">
          <img v-bind:src="product.image">
        </div>
        <div id="productInfo">
          <h2>{{product.name}}</h2>
          <router-link :to="{path:'/userinfo', query: {username: product.sellerUsername, msg: 1}}" v-if="$store.state.isLogin"><span>卖家：{{product.sellerUsername}}</span></router-link>
          <router-link :to="{path:'/login'}" v-else><span>卖家：{{product.sellerUsername}}</span></router-link>
          
          <div id="gray">
            <h3>价格：￥{{product.price}}</h3>
            <h3>数量： <i class="el-icon-remove-outline" @click="remove"></i>{{number}}  
            <i class="el-icon-circle-plus-outline" @click="add"></i></h3>
          </div>
          
          
          <span>所属类别：{{getType(product.type)}}</span>
          <span>详情：{{product.description}}</span>
          <h3>交易时间及地点：{{product.timeAndPlace}}</h3>
          <div class="op" v-if="$store.state.isLogin">
            <router-link :to="{path: '/buyItNow', query: { id: this.$route.query.id, number: this.number }}"><el-button class="bin">立即购买！</el-button></router-link>
            <el-button @click="addToCart" class="bin">加入购物车</el-button>
          </div>
          <div class="op" v-else>
            <router-link to='/login' ><el-button class="bin">立即购买</el-button></router-link>
            <router-link to='/login' ><el-button class="bin">加入购物车</el-button></router-link>
          </div>
        </div>
      </div>
      <!-- <div id="main">
        <div id="productImg">
          <img v-bind:src="testimage">
        </div>
        <div id="productInfo">
          <h2>{{testName}}</h2>
          <span id="seller">卖家：{{testSellerUsername}}</span>
          <span>所属类别：{{getType(testType)}}</span>
          <h3>价格：{{testPrice}}</h3>
          <span>数量：{{number}} <i class="el-icon-remove-outline" @click="remove"></i> </span>
          <span>详情：{{testDescription}}</span>
          <h3>交易时间及地点：{{testTimeAndPlace}}</h3>
          <div class="op" v-if="$store.state.isLogin">
            <router-link :to="{path: '/buyItNow', query: { id: this.$route.query.id, number: this.number }}"><el-button >立即购买！</el-button></router-link>
            <el-button @click="addToCart">加入购物车</el-button>
          </div>
        </div>
      </div> -->

      <!-- <div id="comments">
        <div id="releaseComments">
          <textarea placeholder="发布你给商家的留言" cols="30" rows="5" v-model="words"></textarea>
          <el-button @click="submitComment">发布留言</el-button>
        </div>
        <div id="showComments" v-for="i in 5" :key="i.index">
          <div id="usr">
            <img :src="testimage" alt="图片加载不出来了QAQ">
            <div id="name">zj</div>
            <div id="time">2021-6-1</div>
          </div>
          <div id="post">
              我是第{{i}}条留言
          </div>
        </div>
      </div> -->

      <div id="comments">
        <div id="releaseComments">
          <textarea placeholder="发布你给商家的留言" cols="30" rows="5" v-model="words"></textarea>
          <el-button @click="submitComment" id="rc">发布留言</el-button>
        </div>
        <div id="showComments" v-for="i in comments" :key="i.index">
          <div id="usr">
            <img :src="i.image" alt="图片加载不出来了QAQ">
            <div id="name">{{i.username}}</div>
            <div id="time">{{i.time}}</div>
          </div>
          <div id="post">
              {{i.words}}
          </div>
        </div>
      </div>

    </div>
</template>

<script>
import {request} from '../network/request'

export default {
  name: 'product',
  data() {
      return{
        product: '',
        comments: '',
        words: '',
        testimage: 'https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/178661/28/3905/138182/609d39a7Eb1a7b045/c6f860d88ffe3ffd.jpg.webp',
        testName: '百草味 冰雪蛋糕540g/箱网红饼干糕点点心整箱早餐手撕小面包麻薯夹心糯米糍',
        testPrice: '99.9',
        testSellerUsername: '百草味官方旗舰店',
        number: 1,
        totalNumber: '',
        testDescription: '【自营包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准预包邮】备考2021.6月星火英语六级真题备考21试卷真题详解+标准预测（6级）真题词汇写作听准测（6级）真题词汇写力翻译语法自营包邮',
        testType: 6,
        testTimeAndPlace: '每周三下午两点绿园北门'
    }
  },
  methods: {
    remove(){
            if(this.number > 1)
                this.number--;
        },
    add(){
      if(this.number < this.totalNumber)
        this.number++;
      else{
         this.$message({
            message: "卖家只有这么多存货了QAQ",
            type: "success"
            });
      }
    },
    addToCart() {
      request({
        url: '/product',
        method: 'post',
        data: {
          type: 1,
          pid: this.$route.query.id,
          number: this.number,
        }
      }).then(res => {
        console.log(res)
        if(res.data.res == 1){
          this.$message({
            message: "加入购物车成功",
            type: "success"
            });
          this.$router.push({
              path: '/myCart'
          })
        }
      })
    },
    getType(type){
      switch(type){
        case 1:
          return "电子产品"
        case 2:
          return "学习文具"
        case 3:
          return "生活用品"
        case 4:
          return "美妆服饰"
        case 5:
          return "教材图书"
        case 6:
          return "食品饮料"
        case 7:
          return "精美礼品"
        case 8:
          return "休闲娱乐"
        case 9:
          return "其他"
      }
    },
    submitComment(){
      if(this.words.length == 0){
        this.$message.error("请输入留言！");
        return;
      }
      if(!this.$store.state.isLogin){
        this.$router.push('/login')
        return;
      }
      var date = new Date();
      var year = date.getFullYear(); //存储年
      var month = date.getMonth() + 1; //存储月份
      var day = date.getDate(); //存储日期
      var time = year+'.'+month+'.'+day
      request({
        url: '/product',
        method: 'post',
        data:{
          type: 2,
          time: time,
          words: this.words,
          pid: this.$route.query.id,
        }
      }).then(res=>{
        console.log(res)
        if(res.data.res == 1){
          this.$message({
            message: "发布留言成功",
            type: "success"
            });
        }
        this.comments = res.data.comments
      })
      
    }
  },
  created() {
    console.log(this.$route.query.id)
    request({
      url:'/product',
      method: 'get',
      params: {
        pid: this.$route.query.id
      }
    }).then(res => {
      this.product = res.data.product
      this.comments = res.data.comments
      console.log(res)
      this.totalNumber = this.product.number
    })
  },
}
</script>

<style scoped>

#product {
  background-color: #fff;
}

#main {
  background-color: #fff;
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

#productInfo {
  width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#productImg img {
  height: 350px;
  padding-bottom: 80px;
}

.op {
  display: flex;
  justify-content: space-around;
}

.el-icon-remove-outline {
  margin-right: 10px;
}

.el-icon-circle-plus-outline {
  margin-left: 10px;
}

#comments {
  padding-bottom: 10px;
}

#usr {
    display: flex;
    justify-content: flex-start;
}

#name, #time {
    line-height: 24px;
    margin-left: 20px;
}

#time {
    color: #ccc;
    font-size: 12px;
    line-height: 27px;
}

#post {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    overflow: hidden;
}

#usr img{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #ebebeb;
    overflow: hidden;
}

#releaseComments .el-button {
    margin-left: 850px;
    width: 150px;
    margin-top: 20px;
}

textarea {
    outline: none;
    padding: 10px;
    font: 16px 'Microsoft Yahei'
}

#releaseComments {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px 50px;
  border-bottom: 1px solid #000;
}

#showComments {
    border: 1px solid rgb(204,204,204);
    border-bottom: 2px solid rgb(204,204,204);
    height: 100px;
    width: 1000px;
    display: flex;
    flex-direction: column;
    padding: 10px;
    justify-content: space-around;
    margin: 20px auto;
    background-color: #fff;
}

#gray {
  display: flex;
  flex-direction: column;
  background-color: rgb(232, 232, 232);
  justify-content: space-around;
  height: 100px;
  padding-left: 20px;
}

.bin {
  background-color: #e4393c;
  color:#fff;
}

#rc {
  background-color: rgb(255,0,54);
  color: #fff;
}

</style>